<template>
  <Head-img name="文章" text="人生的不可测，在任何时候，都要抱着一份希望。" />
  <div @click="overText(title)">
    {{ title }}
  </div>
  <div class="context">
    <router-link class="box" to="home">
      <img src="../assets/img/pic1.jpg" alt="标题图片" />
      <p class="title">ref 简单使用</p>
    </router-link>
    <router-link class="box" to="collapse">
      <img src="../assets/img/pic1.jpg" alt="标题图片" />
      <p class="title">实现折叠面板</p>
    </router-link>
  </div>
</template>

<script lang="ts">
import HeadImg from "@/components/HeadImg.vue";
import { reactive, ref, toRefs, watch } from "vue";

interface Model {
  list: object[];
  title: string;
  value: string;
}

export default {
  name: "paragraph",
  components: {
    HeadImg
  },
  setup() {
    const data: Model = reactive({
      list: [],
      title: "文章列表",
      value: ""
    });

    // 切换title
    const overText = ref((event: string) => {
      document.title = event;
    });

    const datas = toRefs(data);

    watch([() => data.value], (newValue, oldValue) => {
      console.log("新值", newValue);
      console.log("老值", oldValue);
      data.title = newValue[0];
    });
    // ?监听器 可以同时监听多个值 第一个参数为数组，对应监听值也是数组

    return {
      ...datas,
      overText
    };
  }
};
</script>

<style lang="scss" scoped>
.context {
  display: flex;
  padding: 10px 30px;
  .box {
    width: 200px;
    margin-right: 30px;
    box-shadow: 0 0 20px 1px #e8ded2;
    cursor: pointer;
    .title {
      display: block;
      width: 100%;
    }
    img {
      width: 100%;
      height: auto;
    }
    &:hover {
      box-shadow: 0 0 20px 7px #e8ded2;
      width: 220px;
    }
  }
}
</style>
